<template>
  <div>
    <h1>{{ message }}</h1>
    <h1 v-html="message"></h1>
    <input v-model="message" />
    男：<input type="radio" name="sex" v-bind:checked="flg" /> 女：<input
      type="radio"
      name="sex"
      :checked="!flg"
    />
    <ul>
      <li v-for="(item, index) in datalist" :key="index">
        {{ index + "@" + item }}
      </li>
    </ul>
    <div v-if="username">有username</div>
    <div v-else>没有username</div>
    <button v-on:click="handlerclick">v-on:click</button>
    <button @click="handlerclick">v-on:click</button>
    <input type="text" v-model="firstname" placeholder="first name" />
    <input type="text" v-model="lastname" placeholder="last name" />
    <input type="text" v-model="fullname" placeholder="full name" ref="aaa" />
    <hr >
    <my-tag :mlist="mlist" :defaultv="defaultv" @senddatatoparent="resolve">
      <template slot="header">
        这个自定义标签mytag
      </template>
      <template slot="footer">
          这是footerfooter
        </template>
    </my-tag>
    <hr />
    <router-view ></router-view>
  </div>
</template>
<script>
import MyTag from "@/components/MyTag.vue";

export default {
  components: {
    MyTag: MyTag,
  },
  name: "my",
  data() {
    return {
      flg: false,
      message: "hello world",
      datalist: ["中国", "日本", "aaaa"],
      username: null,
      firstname: "",
      lastname: "",
      defaultv: '0002',
      datalist0: [{ label: "中国" }, { label: "日本" }, { label: "日本" }],
      mlist: [{value: "0001", label: '北京'},
            {value: "0002", label: '上海'},
            {value: "0003", label: '天津'},
            ]
    };
  },
  computed: {
    fullname() {
      return this.firstname + " " + this.lastname;
    },
  },
  watch: {
    // firstname(n, o) {
    //   this.fullname = this.firstname + ' ' + this.lastname
    // },
    datalist0: {
      handler(n, o) {},
      deep: true,
    },
  },
  methods: {
    handlerclick() {
      this.flg = !this.flg;
    },
    resolve(ddd) {
       alert(ddd)
    }
  },
  beforeCreate() {
    console.info("-------beforeCreate--------");
  },
  created: function () {
    console.info("-------created--------");
  },
  beforeMount() {
    console.info("-------beforeMount--------");
  },
  mounted() {
    console.info((this.$refs.aaa.style.backgroundColor = "RED"));
    console.info("-------mounted--------");
  },
  beforeUpdate() {
    console.info("-------beforeUpdate--------");
  },
  updated() {
    console.info("-------updated--------");
  },
};
</script>
<style lang="scss" scoped>
</style>